<template>
    <div class="flex mx-6 mt-2 bg-white rounded-md">
        <div class="relative flex flex-1 h-24 p-5" v-for="(item, index) in titleList" :key="index">
            <div class="flex items-center justify-center w-6 h-6 rounded-full image__box">
                <img class="w-4 h-4" :src="`/src/assets/images/workBench/shuju${index + 1}.svg`" alt="">
            </div>
            <div class="flex flex-col justify-between ml-3">
                <div class="text-sm font-bold title__txt">{{ item.name }}</div>
                <div class="text-sm font-bold title__txt">
                    <span class="text-xl">{{ item.count }}</span>
                    <span>{{ item.unit }}</span>
                </div>

            </div>
            <div v-if="index !== titleList.length" class="title__box--line"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { dataStatistics } from '@/api/workbench';
const dataStatisticsData = ref()

const titleList = reactive([{
    name: '数据资产标的',
    count: 8,
    unit: '个'
},
{
    name: '已登记资产',
    count: 8,
    unit: '个'
}
    ,
{
    name: '已入表资产',
    count: 8,
    unit: '个'
}
    ,
{
    name: '已入表资产总额',
    count: 8,
    unit: ''
}
    ,
{
    name: '累计摊销额',
    count: 8,
    unit: '万元'
}
    ,
{
    name: '减值准备累计金额',
    count: 8,
    unit: '万元'
}])
/**
 * @method 金额拆分
 */
const moneyVerify = (val: string) => {
    const chineseMoneyWords = /[\u4e00-\u9fa5]+/;
    const numbers = /\d+/;
    const chinesePart = val.match(chineseMoneyWords)?.toString() || '';
    const numberPart = val.match(numbers)?.toString() || '';
    return { num: numberPart, unit: chinesePart }
}
/**
 * @method 获取统计数据
 */
const getdataStatistics = async () => {
    const res = await dataStatistics();
    dataStatisticsData.value = res.data;
    if (res.data?.ru_biao_amount_total) {
        dataStatisticsData.value.ru_biao_amount_total = moneyVerify(res.data.ru_biao_amount_total);
    }
    if (res.data?.decrease_amount_total) {
        dataStatisticsData.value.decrease_amount_total = moneyVerify(res.data.decrease_amount_total);
    }
    if (res.data?.current_amortize_total) {
        dataStatisticsData.value.current_amortize_total = moneyVerify(res.data.current_amortize_total);
    }
    // asset_confirm_ru_biao	资产已经确认入表(已入表)	integer(int32)	
    // asset_package_total	资产包总数量	integer(int32)	
    // asset_registration	资产待登记数量	integer(int32)	
    // current_amortize_total	当前累计摊销金额	string	
    // current_month_ru_biao_amount_total	当月完成入表金额	string	
    // decrease_amount_total	累计减值金额	string	
    // ru_biao_amount_total	可入表总金额
    const { asset_confirm_ru_biao, asset_package_total, asset_registration, current_amortize_total, current_month_ru_biao_amount_total, decrease_amount_total } = dataStatisticsData.value
    titleList[0].count = asset_package_total
    titleList[1].count = asset_registration
    titleList[2].count = asset_confirm_ru_biao
    titleList[3].count = current_month_ru_biao_amount_total
    titleList[4].count = current_amortize_total?.num
    titleList[4].unit = current_amortize_total?.unit
    titleList[5].count = decrease_amount_total?.num
    titleList[5].unit = decrease_amount_total?.unit

}


onMounted(() => {
    getdataStatistics()

})
</script>

<style lang="less" scoped>
.image__box {
    background: #eceef2;
}

.title__txt {
    color: @base-color-1-text ;
}

.title__box--line {
    position: absolute;
    top: calc(50%-20px);
    right: 0;
    width: 1px;
    height: calc(100% - 40px);
    background: #EBF0FA;
}
</style>